<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 圆点模式 -->
			<pj-demo title="圆点模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="dot"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 条状模式 -->
			<pj-demo title="条状模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="bar"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 线模式 -->
			<pj-demo title="线模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="line"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 下标模式 -->
			<pj-demo title="下标模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="index"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 数字模式 -->
			<pj-demo title="数字模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="number"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 进度模式 -->
			<pj-demo title="进度模式">
				<view class="box">
					<pure-indicator
						:total="list.length"
						:current="current"
						mode="progress"
					></pure-indicator>
				</view>
			</pj-demo>

			<!-- 标题模式 -->
			<pj-demo title="标题模式">
				<view class="box">
					<pure-indicator
						:list="list"
						:total="list.length"
						:current="current"
						mode="title"
					></pure-indicator>
				</view>
			</pj-demo>

			<view class="buttons">
				<pure-button
					theme="danger"
					@onClick="handleSubtract"
					>上一个</pure-button
				>
				<pure-button
					theme="primary"
					@onClick="handleAdd"
					>下一个</pure-button
				>
			</view>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	const list = ref([
		{ src: "/static/images/elephant.jpg", title: "看这只大象大不大" },
		{ src: "/static/images/elephant.jpg", title: "这只大象有点大" },
		{ src: "/static/images/elephant.jpg", title: "看这只大象红不红" },
		{ src: "/static/images/elephant.jpg", title: "这只大象有点红" },
		{ src: "/static/images/elephant.jpg", title: "大象有点大丶" }
	]);
	const current = ref(0);

	// 增加进度
	const handleAdd = () => {
		if (current.value >= list.value.length - 1) current.value = 0;
		else current.value = current.value + 1;
	};

	// 减少进度
	const handleSubtract = () => {
		if (current.value <= 0) current.value = list.value.length - 1;
		else current.value = current.value - 1;
	};
</script>

<style lang="scss" scoped>
	.box {
		background: var(--pure-background-default);
		padding: 20px 10px;
		border-radius: var(--pure-radius-default);
		--pure-indicator-bottom: 0;
	}

	.buttons {
		font-size: var(--pure-font-size-small);
		display: flex;
		flex-direction: row;
		gap: 6px;
	}
</style>
